<template>
  <div class="sanstyle">
    <!--左边 B-->
    <div>
      <div class="ssl">
        <!--标题 B-->
        <div class="sstitle">
          <div class="twz">
            <span class="dwz">采集数据</span>
            <br/>
            <span class="xwz">Collect data</span>
          </div>
        </div>
        <!--标题 E-->

        <!--三栏布局B-->
        <div class="stjqy">
          <div class="bdbk" style="height: 20%;">
            <div class="xsl">
              <div>
                <span style="color: white;font-size: .16rem;">{{year}}年参与工作人数</span>
                <div>
                  <span style=" color: #2EFFF2;font-size: .24rem;">{{personNum}}</span>
                  <span style="font-size: .18rem;color: white">人</span>
                </div>
              </div>
              <div>
                <span style="color: white;font-size: .16rem;">{{year}}年巡护次数</span>
                <div>
                  <span style=" color: #917FFF;font-size: .24rem;">{{patrolNum}}</span>
                  <span style="font-size: .18rem;color: white">次</span>
                </div>
              </div>
            </div>
            <div class="xsl">
              <div>
                <span style="color: white;font-size: .16rem;">{{year}}年数据采集</span>
                <div>
                  <span style=" color: #FFF27F;font-size: .24rem;">{{dataNum}}</span>
                  <span style="font-size: .18rem;color: white">条</span>
                </div>
              </div>
              <div>
                <span style="color: white;font-size: .16rem;">{{year}}年巡护距离</span>
                <div>
                  <span style=" color: #34CEFF;font-size: .24rem;">{{distance}}</span>
                  <span style="font-size: .18rem;color: white">km</span>
                </div>
              </div>
            </div>
          </div>
          <div class="bdbk" style="height: 40%;position: relative;">
            <div class="llbt">
              <span class="dwz" style="line-height: 0;">发现植物最多Top10</span>
              <br/>
              <span class="xwz" style="line-height: 0;">Top10 plants were found</span>
            </div>

            <div style="position:absolute;left: -.4rem;height: calc(100% - .5rem);width: calc(100% + .4rem);"
                 id="bar1"></div>

          </div>
          <div style="height: 40%;position: relative">
            <div class="llbt">
              <span class="dwz" style="line-height: 0;">发现动物最多Top5</span>
              <br/>
              <span class="xwz" style="line-height: 0;">Top5 most animals found</span>
            </div>

            <div
              style="position:absolute;left: -.4rem;height: calc(100% - .6rem);width: calc(100% + .4rem);overflow: hidden"
              id="bar2"></div>

          </div>
        </div>
        <!--三栏布局E-->


      </div>
    </div>
    <!--左边 E-->
    <!--中间 B-->
    <div style="position: relative">
      <div class="bzxq">
        <div v-for="(item,index) in tclist" :key="index">
          <div><img :src="item.ico" alt=""></div>
          <div>
            <span :style="{color: item.color}">{{item.num}}</span>
            <br/>
            <span>{{item.name}}</span>
          </div>
        </div>
      </div>

      <!--分布类型 B-->
      <div class="fblx" style="cursor: pointer">
        <!--<div><span>金雕</span></div>-->
        <div v-for="(item,index) in fbList" :key="index"
             @click="qhfb(item)"
             :style="item.sts?'opacity: 1;':'opacity: .6'">
          <img :src="item.ico" alt=""><span>{{item.name}}</span>
        </div>
      </div>
      <!--分布类型 E-->

      <!--tab切换 B-->
      <div class="qhtab" style="top: 1.6rem;left: .34rem">
        <div v-for="(item,index) in navList" :key="index" @click="datamap(item.type)">
          <img :src="item.sts?'/static/images/tab1.png':'/static/images/tab2.png'" alt="">
          <span style="margin-left: .08rem;">{{item.name}}</span>
        </div>
      </div>
      <!--tab切换 E-->

      <!--中间地图 B-->
      <div id="map" style="height: 75%;width: 100%;margin-top: 15%;"></div>
      <!--中间地图 E-->
    </div>
    <!--中间 E-->
    <!--右边 B-->
    <div>
      <div class="ssls">
        <!--标题 B-->
        <div class="sstitles">
          <div class="twzs">
            <span class="dwz">采集数据</span>
            <br/>
            <span class="xwz">Collect data</span>
          </div>
        </div>
        <!--标题 E-->
        <div class="stjqy">
          <div class="bdbk rzs" style="display:flex;height: 20%;">
            <!--调查次数B-->
            <div>
              <div><span style="color: white;font-size: .16rem;">照片张数</span></div>
              <div><span style="color: #2EFFF2;font-size: .24rem;line-height: .25rem;">{{photoNum}}</span><span
                style="color: white;font-size: .16rem;">次</span>
              </div>
              <div><img style="height: .6rem;" src="/static/images/shipin.png" alt=""></div>
            </div>
            <div>
              <div><span style="color: white;font-size: .16rem;">视频数量</span></div>
              <div><span style="color: #34CEFF;font-size: .24rem;line-height: .25rem;">{{videoNum}}</span><span
                style="color: white;font-size: .16rem;">次</span>
              </div>
              <div><img style="height: .6rem;" src="/static/images/zhaopian.png" alt=""></div>
            </div>
          </div>
          <!--调查次数E-->
          <div class="bdbk" style="height: 40%;position: relative;">
            <div class="llbt">
              <span class="dwz" style="line-height: 0;">发现物种</span>
              <br/>
              <span class="xwz" style="line-height: 0;">Discovered species</span>
            </div>
            <div style="position:absolute;left: -.4rem;height: calc(100% - .6rem);width: calc(100% + .4rem);">
              <div style="width: 100%;height: 100%;position: relative;overflow: hidden">
                <div id="tags">
                  <a href="#" v-for="bqy in biaoqianyun">{{ bqy.name }}</a>
                </div>
                <canvas id="myCanvas" style="width:100%"></canvas>
              </div>
            </div>
          </div>
          <div style="height: 40%;position: relative">
            <div class="llbt">
              <span class="dwz" style="line-height: 0;">巡护次数最多Top5</span>
              <br/>
              <span class="xwz" style="line-height: 0;">Top5 patrol times</span>
            </div>

            <div style="position:absolute;left: 0;height: calc(100% - .6rem);width: 100%;"
                 id="bar3"></div>
          </div>
        </div>

      </div>
    </div>
    <!--右边 E-->

  </div>
</template>

<script>
  import * as echarts from 'echarts'
  import http from '../utils/http'
  import api from '../utils/api'

  export default {
    name: "xxjc",
    data() {
      return {
        navList: [
          {
            name: '功能区划',
            type: 'gnqh',
            sts: true
          },
          {
            name: '网格',
            type: 'wg',
            sts: false
          }
        ],
        fbList: [
          {
            name: "干扰分布",
            ico: '/static/images/green.png',
            sts: true
          },
          {
            name: "动物分布",
            ico: '/static/images/red.png',
            sts: true
          },
          {
            name: "植物分布",
            ico: '/static/images/yellow.png',
            sts: true
          }
        ],
        tclist: [
          {
            ico: '/static/images/xh1.png',
            name: '参加工作(人数)',
            num: 0,
            color: '#2EFFF2'
          }, {
            ico: '/static/images/xh2.png',
            name: '巡护距离(km)',
            num: 0,
            color: '#FFF27F'
          }, {
            ico: '/static/images/xh3.png',
            name: '巡护次数(次)',
            num: 0,
            color: '#917FFF'
          }, {
            ico: '/static/images/xh4.png',
            name: '采集数据(条)',
            num: 0,
            color: '#34CEFF'
          },
        ],
        biaoqianyun: [],
        areaId: "",
        year: '',
        dataNum: 0,
        distance: 0,
        patrolNum: 0,
        personNum: 0,
        photoNum: 0,
        videoNum: 0,
        gr: [],
        dw: [],
        zw: [],
        ganrao: [],
        plant: [],
        animal: [],
        maptype: "gnqh",
        bhqName: [],
        MapColor: [
          'rgba(203, 255, 252, 0.8)',
          'rgba(74, 239, 230, 0.8)',
          'rgba(4, 178, 169, 0.8)',
          'rgba(203, 255, 252, 0.8)',
          'rgba(114,8,82,.8)',
          'rgba(174,213,13,.8)',
          'rgba(194,133,112,.8)',
          'rgba(225,66,19,.8)',
          'rgba(94,60,190,.8)',
          'rgba(253,166,199,.8)'
        ]
      }
    },
    mounted() {
      let vm = this;
      (async function f() {
        let res = await http.get('/papi/' + vm.areaId + '_json/gnqh.json')
        let arr = [];
        res.data.features.forEach(t => {
          arr.push(t.properties.name)
        })
        vm.bhqName = arr;
        vm.getPatrolView();
      })();

    },
    created() {
      this.areaId = window.sessionStorage.getItem('areaId');
      this.year = new Date().getFullYear();

    },
    methods: {
      datamap(flag) {
        this.maptype = flag;
        this.navList.forEach(e => {
          if (flag == e.type) {
            e.sts = true
          } else {
            e.sts = false
          }
        })
        if (flag == 'gnqh') {
          let url = '/papi/' + this.areaId + '_json/gnqh.json';
          let jsondata = []
          let e = ['实验区', '缓冲区', '核心区', '延庆区']
          this.bhqName.forEach((c, x) => {
            jsondata.push(
              {
                name: c,
                value: 1,
                label: {
                  show: false,
                },
                itemStyle: {
                  show: true,
                  areaColor: this.MapColor[x],
                  borderColor: this.MapColor[x],
                  borderWidth: "1"
                },
              }
            )
          });
          let geo = {
            type: "map",
            map: 'GeoJson',
            regions: jsondata,
            zoom: 1.1,
            show: true,
            roam: true,
          };
          this.map(url, geo, this.gr, this.zw, this.dw)
        }
        if (flag == 'wg') {
          let geo = {
            map: 'GeoJson',
            show: true,
            roam: true,
            zoom: 1.1,
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                areaColor: 'rgba(4, 178, 169, 0.8)',
                borderColor: '#4AEFE6',
                borderWidth: 1,
              },
              emphasis: {},
            },
          };
          let url = '/papi/' + this.areaId + '_json/wangge.json';
          this.map(url, geo, this.gr, this.zw, this.dw)
        }
      },
      getPatrolView() {
        let vm = this;
        (async function f() {
          let res = await http.get(api.getTotallPatrolView + vm.areaId + "&startTimeStr=" + vm.year)
          vm.dataNum = res.data.dataNum.toFixed(0);
          vm.distance = res.data.distance.toFixed(0);
          vm.patrolNum = res.data.patrolNum.toFixed(0);
          vm.personNum = res.data.personNum.toFixed(0);
          vm.photoNum = res.data.photoNum.toFixed(0);
          vm.videoNum = res.data.videoNum.toFixed(0);
          let x = [], y = [];
          for (let key in  res.data.top5) {
            x.push(key);
            y.push(res.data.top5[key])
          }
          vm.drawbar3(x, y);
        })();
        (async function f() {
          let res = await http.get(api.getTotallPatrolView + vm.areaId + "&startTimeStr=")
          vm.tclist[3].num = res.data.dataNum.toFixed(0);
          vm.tclist[1].num = res.data.distance.toFixed(0);
          vm.tclist[2].num = res.data.patrolNum.toFixed(0);
          vm.tclist[0].num = res.data.personNum.toFixed(0);
        })();
        (async function f() {
          let res = await http.get(api.getPlant + vm.areaId + "&startTimeStr=" + vm.year)
          let x = [], y = [];
          res.data.plantTop.forEach(t => {
            x.push(t.name);
            y.push(t.number)
          })
          vm.drawbar1(x, y);
        })();
        (async function f() {
          let res = await http.get(api.getAnimal + vm.areaId + "&startTimeStr=" + vm.year)
          let x = [], y = [];
          res.data.animalTop.forEach(t => {
            x.push(t.name);
            y.push(t.number)
          })
          vm.drawbar2(x, y);
        })();
        (async function f() {
          let res = await http.get(api.patrolSpecies + vm.areaId + "&startTimeStr=" + vm.year)
          let arr = [];
          res.data.data.forEach((t, x) => {
            if (x < 13) {
              let z = {
                name: t
              }
              arr.push(z)
            }
          })
          vm.biaoqianyun = arr;
          setTimeout(function () {
            vm.try()
          }, 1000)

        })();
        (async function f() {
          let res = await http.get(api.getFenbu + vm.areaId + "&startTimeStr=" + vm.year)
          let a = [], b = [], c = [];
          res.data.ganrao.forEach((e, index) => {
            if (index < 100) {
              let z = {value: [e.lon, e.lat]}
              a.push(z)
            }
          });
          res.data.plant.forEach((e, index) => {
            if (index < 100) {
              let z = {value: [e.lon, e.lat]}
              b.push(z)
            }
          });
          res.data.animal.forEach((e, index) => {
            if (index < 100) {
              let z = {value: [e.lon, e.lat]}
              c.push(z)
            }
          })
          vm.ganrao = a;
          vm.plant = b;
          vm.animal = c;
          vm.gr = a;
          vm.zw = b;
          vm.dw = c;
          vm.datamap('gnqh');
        })();
      },
      try() {
        try {
          TagCanvas.Start('myCanvas', 'tags', {
            textColour: '#2EFFF2',
            outlineColour: 'rgba(0,0,0,.1)',
            reverse: true,
            depth: .5,
            textHeight: 14,
            dragControl: true,
            decel: .95,
            maxSpeed: 0.05,
            initial: [0.1, -0.2], // 配置旋转速度
          });
        } catch (e) {
        }

      },
      map(url, geo, gr, zw, dw) {
        let vm = this
        let myChart = echarts.getInstanceByDom(document.getElementById("map"))
        if (myChart == null) { // 如果不存在，就进行初始化
          myChart = echarts.init(document.getElementById("map"));
        } else {
          myChart.clear();
        }
        $.getJSON(url, function (geoJson) {
          echarts.registerMap('GeoJson', geoJson);
          myChart.showLoading('default', {
            text: '加载中，请稍候...', maskColor: 'rgba(0,0,0,.3)', textColor: '#fff',
          });
          let option = {
            geo: geo,
            series: [
              {
                type: 'scatter',
                coordinateSystem: 'geo',
                symbol: 'image:///static/images/green.png',
                legendHoverLink: true,
                symbolSize: [16, 18],
                data: gr,
                showEffectOn: 'render',
                rippleEffect: {
                  brushType: 'stroke',
                },
                hoverAnimation: true,
                zlevel: 1,
              },
              {
                type: 'scatter',
                coordinateSystem: 'geo',
                symbol: 'image:///static/images/yellow.png',
                symbolSize: [16, 18],
                data: zw,
                showEffectOn: 'render',
                rippleEffect: {
                  brushType: 'stroke',
                },
                hoverAnimation: true,
                zlevel: 1,
              }, {
                type: 'scatter',
                coordinateSystem: 'geo',
                symbol: 'image:///static/images/red.png',
                symbolSize: [16, 18],
                data: dw,
                showEffectOn: 'render',
                rippleEffect: {
                  brushType: 'stroke',
                },
                hoverAnimation: true,
                zlevel: 1,
              },
            ]
          }
          myChart.setOption(option, true);
          setTimeout(function () {
            myChart.hideLoading();
            myChart.resize();
          }, 500);
          window.addEventListener("resize", function () {
            myChart.resize();
          })
        });
      },
      filteryType(e) {
        if (e == '延庆区') {
          return 'rgba(203, 255, 252, 0.8)'
        }
        if (e == '缓冲区') {
          return 'rgba(74, 239, 230, 0.8)'
        }
        if (e == '核心区') {
          return 'rgba(4, 178, 169, 0.8)'
        }
      },
      qhfb(item) {
        item.sts = !item.sts;
        let url = '', geo = {}, jsondata = [], e = ['实验区', '缓冲区', '核心区'];
        if (this.maptype == 'gnqh') {
          this.bhqName.forEach((c, x) => {
            jsondata.push(
              {
                name: c,
                value: 1,
                label: {
                  show: false,
                },
                itemStyle: {
                  show: true,
                  areaColor: this.MapColor[x],
                  borderColor: this.MapColor[x],
                  borderWidth: "1"
                },
              }
            )
          });
          geo = {
            type: "map",
            map: 'GeoJson',
            regions: jsondata,
            zoom: 1.1,
            show: true,
            roam: true,
          };
          url = '/papi/' + this.areaId + '_json/gnqh.json';
        }
        if (this.maptype == 'wg') {
          geo = {
            map: 'GeoJson',
            show: true,
            roam: true,
            zoom: 1.1,
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                areaColor: 'rgba(4, 178, 169, 0.8)',
                borderColor: '#4AEFE6',
                borderWidth: 1,
              },
              emphasis: {},
            },
          };
          url = '/papi/' + this.areaId + '_json/wangge.json';
        }
        if (item.sts) {
          if (item.name == '干扰分布') {
            this.gr = this.ganrao
          }
          if (item.name == '动物分布') {
            this.dw = this.animal
          }
          if (item.name == '植物分布') {
            this.zw = this.plant
          }
        } else {
          if (item.name == '干扰分布') {
            this.gr = []
          }
          if (item.name == '动物分布') {
            this.dw = []
          }
          if (item.name == '植物分布') {
            this.zw = []
          }
        }
        ;

        this.map(url, geo, this.gr, this.zw, this.dw);
      },
      drawbar1(x, y) {
        let myChart = echarts.getInstanceByDom(document.getElementById('bar1'));
        if (myChart == null) {
          myChart = echarts.init(document.getElementById('bar1'));
        }
        let option = {
            xAxis: {
              type: 'category',
              axisLabel: {
                textStyle: {
                  color: "#fff"
                },
                rotate: 30
              },
              axisTick: {
                //y轴刻度线
                show: false
              },
              data: x,
            },
            yAxis: {
              type: 'value',
              axisLabel: {
                color: "#fff",
              },
              splitLine: {
                lineStyle: {
                  color: 'rgba(255, 255, 255, 0.1)'
                }
              }
            }
            ,
            grid: {
              top: '13%',
              left:
                '10%',
              right:
                "1%",
              bottom:
                "22%"
            }
            ,
            series: [
              {
                data: y,
                type: 'bar',
                showBackground: false,
                barWidth: 16,
                label: {
                  show: true,
                  position: 'top',
                  color: '#fff'
                },
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      {
                        offset: 0,
                        color: 'rgba(250, 0, 255, 0)'
                      },
                      {
                        offset: .8,
                        color: 'rgba(255, 232, 29, 0.8)'
                      },
                    ])
                  }
                }
              }
            ]
          }
        ;
        myChart.setOption(option);
        setTimeout(function () {
          myChart.resize();
        }, 100);
        window.addEventListener('resize', function () {
          myChart.resize();
        })
      },
      drawbar2(x, y) {
        let myChart = echarts.getInstanceByDom(document.getElementById('bar2'));
        if (myChart == null) {
          myChart = echarts.init(document.getElementById('bar2'));
        }
        let option = {
          xAxis: {
            type: 'category',
            axisLabel: {
              textStyle: {
                color: "#fff"
              }
            },
            data: x,
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              textStyle: {
                color: "#fff"
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.1)'
              }
            }
          },
          grid: {
            top: '13%',
            left: '10%',
            right: "1%",
            bottom: "15%"
          },
          series: [
            {
              data: y,
              type: 'bar',
              showBackground: true,
              label: {
                show: true,
                position: 'top',
                color: '#fff'
              },
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0,
                      color: 'rgba(0, 41, 255, 0)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(18, 255, 255, 0.8)'
                    }
                  ])
                }
              },
              backgroundStyle: {
                color: 'rgba(255, 255, 255, 1)',
                opacity: .1
              }
            }
          ]
        };
        myChart.setOption(option);
        setTimeout(function () {
          myChart.resize();
        }, 100);
        window.addEventListener('resize', function () {
          myChart.resize();
        })
      },
      drawbar3(x, y) {
        let myChart = echarts.getInstanceByDom(document.getElementById('bar3'));
        if (myChart == null) {
          myChart = echarts.init(document.getElementById('bar3'));
        }
        let option = {
          xAxis: {
            type: 'category',
            axisLabel: {
              textStyle: {
                color: "#fff"
              }
            },
            data: x,
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              textStyle: {
                color: "#fff"
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.1)'
              }
            }
          },
          grid: {
            top: '13%',
            left: '10%',
            right: "1%",
            bottom: "15%"
          },
          series: [
            {
              data: y,
              type: 'bar',
              showBackground: true,
              label: {
                show: true,
                position: 'top',
                color: '#fff'
              },
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0,
                      color: 'rgba(29, 52, 255, 0)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(60, 255, 103, 0.8)'
                    }
                  ])
                }
              },
              backgroundStyle: {
                color: 'rgba(255, 255, 255, 1)',
                opacity: .1
              }
            }
          ]
        };
        myChart.setOption(option);
        setTimeout(function () {
          myChart.resize();
        }, 100);
        window.addEventListener('resize', function () {
          myChart.resize();
        })
      },
    }
  }
</script>

<style scoped>
  @import "../../static/css/jbxx.css";
  @import "../../static/css/xxjc.css";
</style>
